<script setup lang="ts">
import { inject, reactive, Ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/stores/useUserStore'
import { UserLoginDto } from '@/models/userinfo/UserLoginDto';
import { showFailToast } from 'vant';
import { userLogin } from '@/api/userinfo/UserInfoApi';

var showNavbar = inject("showNavbar") as Ref<boolean>;
showNavbar.value = false;
let userStore = useUserStore();
let router = useRouter();
let route = useRoute();
let retUrl = route.query.retUrl;

let form = reactive(new UserLoginDto());

const login = async () => {
    if (!form.userName) showFailToast("请输入用户名")
    if (!form.password) showFailToast("请输入密码")
    let vo = await userLogin(form)
    if (vo) {
        userStore.setUserInfo(vo);
        if (retUrl) {
            router.replace({ path: retUrl?.toString() });
        }
        else {
            router.replace({ path: '/' });
        }
    }
}
</script>
<template>
    <div class="login-bg">
        <div class="login-contain">
            <div class="login-header">
                <p>欢迎登录</p>
            </div>
            <div class="form-group">
                <div class="form-item">
                    <label for="username">
                        <img src="/public/images/user.png">
                    </label>
                    <input id="username" type="text" placeholder="请输入账号" v-model="form.userName">
                </div>
                <div class="form-item">
                    <label for="password">
                        <img src="/public/images/password.png" alt="">
                    </label>
                    <input id="password" type="password" v-model="form.password" placeholder="请输入密码">
                </div>

                <div class="button-group">
                    <button class="login-btn" @click="login">登录</button>
                </div>
            </div>

        </div>
    </div>
</template>

<style scoped>
div.login-bg {
    height: 100vh;
    width: 100vw;

    background: url("../images/login-bg.jpg") no-repeat fixed;
    color: #ffffff;
    background-size: 100% 100%;
    padding-top: 20%;

}

.login-header p {
    font-size: 32px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0.1em 0.15em 0.1em #74C3CA
}

.login-logo {
    padding: 5%;
}

.login-logo img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
}

.login-logo p {
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    letter-spacing: 2px;
    margin-top: 2%;
}

.form-group {
    padding: 5%;
}

.form-group .form-item {
    margin-top: 5%;
    padding: 0 10px;
    border-radius: 20px;
    background-color: #B3DFE2;
}

.form-group .form-item input {
    outline: none;
    border: 0;
    background-color: transparent;
    color: #ffffff;
    height: 40px;
    font-size: 18px;
    width: 90%;
    margin-left: 12%;
}

.form-group .form-item input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #ffffff;
    font-size: 16px;
}

.form-group .form-item input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #ffffff;
    font-size: 16px;
}

.form-group .form-item input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #ffffff;
    font-size: 16px;
}

.form-group .form-item input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #ffffff;
    font-size: 16px;
}

.form-group .form-item label img {
    width: 25px;
    position: absolute;
    margin-top: 5px;
}

.form-group .form-item button {
    outline: none;
    background: transparent;
    border: 1px #00cc99 dashed;
    color: #ffffff;
    height: 30px;
    border-radius: 5px;
    float: right;
    padding: 1%;
}

.button-group {
    padding: 5%;
}

.button-group button {
    outline: none;
    border: 0;
    width: 90%;
    height: 35px;
    margin-top: 4%;
    border-radius: 20px;
    margin-left: 4%;
    color: #ffffff;
    font-size: 18px;
}

.button-group .login-btn {
    background-color: #ffffff;
    color: #74C3CA;
}

.order-login {
    padding: 5%;
}

.order-login-line {
    display: block;
    position: relative;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
}

.order-login-line:before,
.order-login-line:after {
    content: '';
    position: absolute;
    top: 50%;
    background: #ffffff;
    width: 20%;
    height: 1px;
}

.order-login-line:before {
    left: 10%;
}

.order-login-line:after {
    right: 10%;
}

.order-login-box {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

.order-login-box div {
    flex: 1;
    text-align: center;
}

.order-login-box div p {
    text-align: center;
    font-size: 14px;
    color: #ffffff;
}
</style>
